<template>
  <view>
    <uni-nav-bar :border="false" statusBar fixed title="我的" backgroundColor="#8bb1eb">
      <view class="my">我的</view>
    </uni-nav-bar>
    <view style="position: relative;">
      <div class="bg"></div>
      <div style="padding: 0 20px;">
        <view class="flexB">
          <div class="flex ac">
            <view>
              <image class="userImg" :src="info.headimgurl" />
            </view>
            <view class="name" @click="login">
              <div class="f16">{{ isToken && (info.nickname || '--') || '登录/注册' }}</div>
              <div v-if="isToken" @click="update" style="font-size: 14px; color: #2755CB;">
                <uni-icons type="compose" size="16" color="#2755CB"></uni-icons> 更新资料
              </div>
            </view>
          </div>
          <div class="flexC ac" @click="ewm" v-if="isToken">
            <image style="width: 20px;" mode="widthFix" src="@/static/ewm.png"></image>
            <div style="color: #2755CB;">会员二维码</div>
          </div>
        </view>
        <div class="flexB vip mtb10">
          <div>充值会员 ｜ 余额：<span style="color: #7889f4;">{{ info.balance || 0 }}</span>元</div>
          <div class="cz" @click="vip" v-if="isToken">去充值</div>
        </div>
        <view class="ibox" style="margin-bottom: 20px;" v-if="isToken">
          <div class="tt">功能服务</div>
          <div class="flexB" style="width: 100%;">
            <div class="flexB ii" @click="open1">
              <div>
                <div class="f16">充值记录</div>
                <div class="c80 flex ac">
                  <span>点击进入</span>
                  <uni-icons type="right" color="#808080" size="10"></uni-icons>
                </div>
              </div>
              <uni-icons type="wallet-filled" size="30" color="#7a95f8"></uni-icons>
            </div>
            <div class="flexB ii2" @click="open2">
              <div>
                <div class="f16">我的订单
                </div>
                <div class="c80 flex ac">
                  <span>点击进入</span>
                  <uni-icons type="right" color="#808080" size="10"></uni-icons>
                </div>
              </div>
              <uni-icons type="gift-filled" size="30" color="#50ac61"></uni-icons>
            </div>
          </div>
        </view>
        <view class="ibox">
          <div class="tt">其他操作</div>
          <view class="lis" @click="scan" v-if="isToken">
            <uni-icons type="scan" color="#000" size="20"></uni-icons>
            <span>扫一扫</span>
            <span class="flow"></span>
            <uni-icons type="right" color="#000" size="20"></uni-icons>
          </view>
          <view class="lis" @click="about">
            <uni-icons type="phone" color="#000" size="20"></uni-icons>
            <span>联系客服</span>
            <span class="flow"></span>
            <uni-icons type="right" color="#000" size="20"></uni-icons>
          </view>
          <view class="lis" @click="openBi">
            <uni-icons type="auth" color="#000" size="20"></uni-icons>
            <span>入场运动安全须知</span>
            <span class="flow"></span>
            <uni-icons type="right" color="#000" size="20"></uni-icons>
          </view>
          <view class="lis" @click="logout" v-if="isToken">
            <uni-icons type="redo" color="#000" size="20"></uni-icons>
            <span>退出登录</span>
            <span class="flow"></span>
            <uni-icons type="right" color="#000" size="20"></uni-icons>
          </view>
        </view>
      </div>
    </view>
    <uni-popup type="bottom" ref="cc" background-color="#fff">
      <div style="text-align: center; padding: 20px;">
        <div>会员二维码</div>
        <image style="width: 55vw; height: 55vw;" :src="'data:image/png;base64,' + info.qrcode" mode="aspectFit">
        </image>
      </div>
    </uni-popup>
    <uni-popup type="bottom" ref="call" background-color="#fff">
      <div style="text-align: center; padding: 20px;">
        <div class="mb10">长按下方二维码添加客服微信</div>
        <image v-if="info.kfwx" show-menu-by-longpress style="width: 55vw; height: 55vw;" :src="base + info.kfwx" mode="aspectFit">
        </image>
        <div v-else style="margin: auto; width: 55vw; height: 55vw; text-align: center; line-height: 55vw; background: #eee; border-radius: 10px;">
          请联系管理员添加二维码
        </div>
        <div style="color: #333; margin-top: 10px;" @click="callpp">
          <uni-icons type="phone-filled" color="#2755CB" size="18"></uni-icons>
          <span style="margin: 0 10px;">{{ info.kfPhone || 13330075971 }}</span>
          <span style="color: #2755CB; text-decoration: underline;">拨打</span>
        </div>
      </div>
    </uni-popup>
    <uni-popup type="bottom" ref="popup1" background-color="#fff">
      <view class="p10">
        <div class="f14 theme tip mtb10">入场运动安全须知</div>
        <div class="c80">1、患有高血压、心脏病、特殊遗传病、身体机能缺陷等人群，不建议运动，强行运动者，后果自负</div>
        <div class="c80">2、在进行运动前需做好充分热身，活动关节肌肉，激活身体机能状态，并观察自我身体情况</div>
        <div class="c80">3、严禁酒后进入场馆运动</div>
        <div class="c80">4、严禁自行车、儿童车、滑板车等进入体育场内，严禁在场内放无人机等</div>
        <div class="c80">5、严禁攀爬护栏、踩踏座椅、随意移动器械等扰乱场内管理秩序的行为</div>
        <div class="c80">6、严禁携带宠物、有腐蚀作用的饮料或危险违禁品入场，严禁堵塞体育场内外安全通道</div>
        <div class="c80">7、严禁打架斗殴等，由此造成伤害的，场馆概不负责</div>
        <div class="c80">8、严禁开展不健康或非法活动，对违反治安管理条例者，将移送公安机关依法处理</div>
        <div class="c80">9、请在进场前更换适宜的运动鞋，严禁穿高跟鞋、钢钉鞋、旱冰鞋、滑板鞋进入运动场地</div>
        <div class="c80">10、儿童入场需由成人看护，避免发生意外，凡违反规定不听劝阻造成意外的，由监护人或受托监护人承担全部责任</div>
        <div class="c80">11、凡进入场馆的人员被视作已详细阅读本须知，并已同意和接受本须知的全部内容。感谢您对我们工作的支持，愿您在这里度过一段美好时光</div>
        <div class="c80">如有身体不适，请尽快联系前台或拨打120</div>
        <div class="c80">前台电话：13330075971</div>
        <div class="c80">谢谢配合</div>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      n: '获取昵称',
      qrImage: '',
      info: {},
      base: this.$base,
      isToken: uni.getStorageSync('token'),
    };
  },
  onShow() {
    if (this.isToken) this.init();
  },
  computed: {

  },
  methods: {
    callpp() {
      uni.makePhoneCall({
        phoneNumber: this.info.kfPhone && (this.info.kfPhone+'') || '13330075971',
      });
    },
    about() {
      this.$refs.call.open('bottom');
    },
    openBi() {
      this.$refs.popup1.open('bottom');
    },
    scan() {
      uni.scanCode({
        success: (res) => {
          // console.log(res);
          this.$request({
            url: `/order/bindUserOrder?pickNo=${res.result}`,
            method: 'get',
            loading: true,
          }).then(res2 => {
            uni.showToast({
              title: res2.msg,
              icon: res2.code == 200 ? 'success' : 'error',
              duration: 2000
            });
          })
        }
      });
    },
    vip() {
      uni.navigateTo({
        url: `/pages/vip`
      });
    },
    ewm() {
      this.$refs.cc.open('bottom');
    },
    open1() {
      uni.navigateTo({
        url: `/pages/vipList`
      });
    },
    open2() {
      uni.navigateTo({
        url: `/pages/orderList`
      });
    },
    init() {
      this.$request({
        url: '/wx/user/getUseInfo',
        method: 'get',
        loading: true,
      }).then(res => {
        this.info = res.data;
      })
    },
    login() {
      if(this.isToken) return;
      uni.reLaunch({
        url: '/pages/login'
      });
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('token');
            uni.reLaunch({
              url: '/pages/login'
            });
          } else if (res.cancel) {
          }
        }
      });
    },
    update() {
      uni.navigateTo({
				url: `/pages/userInfo`
			});
    }
  }
}
</script>

<style lang="scss">
.vip {
  padding: 20rpx;
  border-radius: 20rpx;
  background: #333;
  font-size: 30rpx;
  color: #fff;
}

.cz {
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  background: #2755CB;
  border-radius: 30rpx;

}

.ii,
.ii2 {
  width: 48%;
  height: 67px;
  border-radius: 8px;
  padding: 0 10px;
  background-image: linear-gradient(to right, #d7f7fe 0%, #d0d7fc 100%);
}

.ii2 {
  background-image: linear-gradient(to right, #c9f5c6 0%, #bcefeb 100%);
}

.tt {
  color: #2755CB;
  margin-bottom: 10px;
  font-size: 16px;
}

.flexBox {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.name {
  font-size: 20px;
}

.lis {
  display: flex;
  align-items: center;
  padding: 10px 0;

  span {
    font-size: 14px;
    margin: 0 10px;
  }

  .flow {
    flex-grow: 1;
  }
}

.userImg {
  width: 64px;
  height: 64px;
  border: 2px solid #fff;
  border-radius: 50%;
  margin-right: 20px;
  text-align: center;
  background: #e0effd;
}

.my {
  font-size: 18px;
  width: 100%;
  color: #333;
  line-height: 44px;
  font-weight: bold;
  text-align: center;
}

.tip::before {
  display: inline-block;
  content: '';
  width: 6rpx;
  height: 20rpx;
  margin-right: 10rpx;
  background: $theme;
  border-radius: 5rpx;
}

.bg {
  width: 100%;
  height: 24vh;
  position: absolute;
  top: 0;
  z-index: -1;
  background-image: linear-gradient(to bottom, #8bb1eb 0%, #a7f2cd 100%);
}
</style>
